<template>
  <div class="course-video">
    <van-nav-bar
      title="视屏"
      left-text="返回"
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <vid id="video-container"></vid>
  </div>
</template>

<script>
import { getVideoInfo } from '@/services/course'
export default {
  name: 'CourseVideo',
  props: {
    lessonId: {
      type: [String, Number],
      required: true
    }
  },
  created () {
    this.loadVideo()
  },
  methods: {
    async loadVideo () {
      const { data } = await getVideoInfo({
        lessonId: this.lessonId
      })
      const player = new window.Aliplayer(
        {
          id: 'video-container',
          vid: data.content.fileId,
          playauth: data.content.playAuth,
          qualitySort: 'asc',
          fromat: 'mp4',
          mediaType: '100%',
          width: '100%',
          height: '100%',
          autoplay: true,
          isLive: false,
          rePlay: false,
          playsinline: true,
          preload: true,
          controlBarVisibility: 'hover',
          useH5Prism: true
        },
        function (player) {
          console.log('the player is created')
        }
      )
      console.log(player)
    }
  }
}
</script>

<style lang="scss" scoped>
.course-video {
  width: 100%;
  height: 210px;
}
#video-container {
  width: 100%;
  height: auto;
}
</style>
